<template>
  <div id="app" v-cloak>
    <div>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-card>
            <div class="search-page" slot="header">
              <i class="el-icon-menu"><span>筛选</span></i>
            </div>
            <div class="search-content">
              <el-form
                :inline="true"
                size="small"
                label-width="180px"
                :model="query"
              >
                <el-form-item label="手机号">
                  <el-input
                    v-model="query.phone"
                    placeholder="输入手机号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="科目">
                  <el-select
                    v-model="query.subjectId"
                    :disabled="readonly"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="subject in subjects"
                      :key="subject.id"
                      :label="subject.name"
                      :value="subject.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="题目">
                  <el-input
                    v-model="query.questionTitle"
                    placeholder="输入题目"
                  ></el-input>
                </el-form-item>
                <el-form-item label="处理状态">
                  <el-select
                    v-model="query.handleStatus"
                    clearable
                    placeholder="请选择处理状态"
                  >
                    <el-option key="0" label="未采纳" value="0"> </el-option>
                    <el-option key="1" label="已采纳" value="1"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="时间">
                  <el-date-picker
                    v-model="query.time"
                    type="daterange"
                    align="right"
                    unlink-panels
                    :clearable="false"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="timestamp"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label=" ">
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="onSearch"
                    >查询
                  </el-button>
                  <el-button
                    type="info"
                    size="small"
                    icon="el-icon-refresh"
                    @click="onClean"
                    >重置
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px" :gutter="24">
        <el-col :span="24">
          <el-card>
            <div class="table-page" slot="header">
              <div>
                <i class="el-icon-s-fold"><span>纠错列表</span></i>
              </div>
            </div>
            <div class="table-content">
              <el-table
                :data="tableData"
                v-loading="loading"
                border
                stripe
                size="mini"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="phone" width="100" label="手机号">
                </el-table-column>
                <el-table-column prop="time" width="150" label="时间">
                  <template slot-scope="scope">
                    {{scope.row.time|formatDate}}
                  </template>
                </el-table-column>
                <el-table-column prop="questionId" width="80" label="题目ID">
                </el-table-column>
                <el-table-column prop="subjectName" width="80" label="科目">
                </el-table-column>
                <el-table-column
                  prop="questionTitle"
                  show-overflow-tooltip
                  label="题目"
                >
                </el-table-column>
                <el-table-column prop="errorContent" label="错题描述">
                </el-table-column>
                <el-table-column
                  prop="questionOnline"
                  width="100"
                  label="题目状态"
                >
                  <template slot-scope="scope">
                    <el-tag
                      size="mini"
                      :type="
                        scope.row.questionOnline == '0' ? 'primary' : 'success'"
                      disable-transitions
                      >{{
                        scope.row.questionOnline == "0" ? "下线" : "上线"
                      }}</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="handleStatus"
                  width="100"
                  label="处理状态"
                >
                  <template slot-scope="scope">
                    <el-tag
                      size="mini"
                      :type="
                        scope.row.handleStatus == '0' ? 'primary' : 'success'"
                      disable-transitions
                      >{{
                        scope.row.handleStatus == "0" ? "未采纳" : "已采纳"
                      }}</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  width="150"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.row.questionOnline == '0'"
                      size="mini"
                      type="text"
                      @click="questionOnline(1, scope.row.questionId)"
                      >上线</el-button
                    >
                    <el-button
                      v-if="scope.row.questionOnline == '1'"
                      size="mini"
                      type="text"
                      @click="questionOnline(0, scope.row.questionId)"
                      >下线</el-button
                    >
                    <router-link
                      v-if="scope.row.questionOnline == '0'"
                      :to="{
                        path: '/questionInfo',
                        query: {
                          id: scope.row.questionId,
                          activeName: '1'
                        }
                      }"
                    >
                      <el-button size="mini" type="text">修改</el-button>
                    </router-link>
                    <el-button
                      v-if="scope.row.handleStatus == '0'"
                      size="mini"
                      type="text"
                      @click="handleStatus(scope.row.id)"
                      >采纳</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                style="display: flex;justify-content: flex-end;margin-top: 10px;"
                :current-page="page"
                :page-sizes="[10, 20, 30]"
                :page-size="limit"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                background
                class="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui";
import __Config from "../../api/config"; //实际路径
import { getSubjectTypeList, getSubjectList } from "@/api/subjectType.js";
export default {
  name: "QuestionErrorCorrection",
  data() {
    return {
      tableData: [],
      listSum: {
        loadCount: 0,
        errorCount: 0
      },
      query: {
        time: []
      },
      page: 1,
      limit: 10,
      total: 0,
      loading: false,
      selectUserId: 0,
      subjects: [],
      multipleSelection: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  methods: {
    onSearch() {
      this.getList();
    },
    onClean() {
      this.query = {
        time: []
      };
      this.getList();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.page = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.query.pageNo = this.page;
      this.query.pageSize = this.limit;
      if (this.query.time && this.query.time.length == 2) {
        this.query.startTime = this.query.time[0];
        this.query.endTime = this.query.time[1]+(86388*1000);
      } else {
        this.query.startTime = undefined;
        this.query.endTime = undefined;
      }
      let params = JSON.parse(JSON.stringify(this.query));
      params.time = undefined;
      this.$axios({
        method: "get",
        url: __Config.api.getQuestionErrorContent,
        headers: {
          Authorization: this.$store.getters.token
        },
        params: params
      })
        .then(res => {
          // console.log(res)
          this.tableData = res.data.data;
          this.total = res.data.page.total;
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          console.log(err);
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      done();
    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }

      return fmt;
    },
    questionOnline(status, id) {
      // 0 下线  1 上线
      this.$axios({
        method: "post",
        url: __Config.api.onlineOrOffline,
        headers: {
          Authorization: this.$store.getters.token
        },
        params: {
          questionId: id,
          type: status
        }
      })
        .then(res => {
          this.onSearch();
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          console.log(res);
        })
        .catch(err => {
          this.$message({
            message: err.response.data.msg,
            type: "warning"
          });
        });
    },
    handleStatus(id) {
      this.$confirm("此操作将采纳该问题, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios({
            method: "post",
            url: __Config.api.getQuestionAcceptStatus,
            headers: {
              Authorization: this.$store.getters.token
            },
            params: {
              id: id
            }
          })
            .then(res => {
              this.onSearch();
              this.$message({
                type: "success",
                message: "采纳成功!"
              });
              console.log(res);
            })
            .catch(err => {
              this.$message({
                message: err.response.data.msg,
                type: "warning"
              });
            });
        })
        .catch(() => {});
    },
    getSubject() {
      getSubjectList().then(res => {
        this.subjects = res.data;
      });
    }
  },
  filters: {
    formatDate: function(timeStamp) {
      var date = new Date(timeStamp);
      //console.log(date); 结果为：Tue Apr 02 2019 07:49:23 GMT+0800 (中国标准时间)
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var hour = date.getHours(); 
      var minute = date.getMinutes();
      var second = date.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if(hour >= 1 && hour <= 9){
        hour = "0" + hour;
      }
      if(minute >= 1 && minute <= 9){
        minute = "0" + minute;
      }
      if(second >= 1 && second <= 9){
        second = "0" + second;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate+" "+hour+":"+minute+":"+second;
      return currentdate;
    }
  },
  mounted() {},
  created() {
    this.getList();
    this.getSubject();
  }
};
</script>

<style>
.header-page {
  margin-bottom: 15px;
}

.search-page {
  display: flex;
  font-size: 16px;
  color: #909399;
}

.search-content {
  display: flex;
}

.table-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #909399;
}

.table-content {
  display: inline;
}

.schedule-content {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.schedule-content2 {
  display: flex;
  /*flex-flow: column;*/
  align-items: center;
  justify-content: center;
}

.schedule-ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.schedule-li {
  width: 14px;
  height: 22px;
  margin-right: 3px;
  color: #ffff;
  background-color: #409eff;
  border-radius: 3px;
  text-align: center;
  font-weight: 500;
}

.el-divider__text {
  color: #909399;
}

[v-cloak] {
  display: none;
}
</style>
